<html>
<head>
	<title>Gestion de Mesas - Cerrar Mesa</title>
  <style type="text/css">
	body {	background-color: gray; padding: 20px; font-family: Segoe UI; }
	h1, h2 { font-weight: lighter; }
	h1 { border-bottom: 1px solid black; }
	.button	{ margin-top: 5px;	clear: both; width: 150px; }
	#cerrar-mesa { width: 50%; border: 1px solid black; margin-left: 25%; background-color: white; padding: 20px; }
	.red { color: red; }
	.hidden { display: none; border: 1px solid red; margin: 30px; padding: 10px; text-align: center; }
	select { width: 150px; }
	.separator { border-bottom: 1px solid black; margin-bottom: 10px; height: 10px; clear: both;}
	.left { width: 50%; float: left; }
	.right { width: 50%; float: right; }
	.text-box { width: 150px; }
	.center { margin-left: 30%; }
  </style>
</head>
<body>
	<div id="cerrar-mesa">
		<h1>Cerrar Mesa</h1>
		<h2>Elija una mesa</h2>
		
		<select>
		  <option value="1">1</option>
		  <option value="2">2</option>
		  <option value="3">3</option>
		  <option value="4">Etc..</option>
		</select>
		
		<div class="button">
			<input type="button" class="button" value="Cerrar mesa" >
		</div>
		
		<div class="separator"></div>
		
		<div class="hidden1">
			<div id="total-mesa" class="red left" >
				<h2>Total a facturar:</h2>
				<div id="valor-total" class="valor">
					$ 12345,99.-
				</div>
			</div>
			
			<div class="right">
				<h2>Monto abonado:</h2>
				<div>
					<input type="text" class="text-box"/>
				</div>
				<h2>Cambio:</h2>
				<div id="cambio">
					$10,00.-
				</div>
			</div>
		</div>
		
		<div class="separator"></div>
		
		<div>
			<input type="button" class="button center" value="Imprimir factura" >
		</div>
	</div>
<body>
<html>